<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.js"></script>
  <script src="js/china.js"></script>
</head>
<body>
<div id="box3-2" style="width: 600px; height: 400px"></div>
</body>

<script>
  var box2_3=echarts.init(document.getElementById("box2-3"));
  var xdata4=["1991年", "1992年", "1993年", "1994年", "1995年", "1996年", "1997年", "1998年", "1999年", "2000年", "2001年", "2002年", "2003年", "2004年", "2005年", "2006年", "2007年", "2008年", "2009年", "2010年", "2011年", "2012年", "2013年", "2014年", "2015年", "2016年", "2017年", "2018年", "2019年", "2020年", "2021年", "2022年","2023年","2024年预测值","2025年预测值"]
  var KSMC4=[18872.9	, 22005.6, 27194.5, 35673.2, 48637.5, 61339.9, 71813.6, 79715, 85195.5, 90564.4	, 100280.1, 110863.1, 121717.4, 137422, 161840.2, 187318.9, 219438.5, 270092.3, 319244.6, 348517.7, 412119.3, 487940.2, 538580, 592963.2, 643563.1, 688858.2, 746395.1, 832035.9, 919281.1, 986515.2, 1013567, 1149237, 1210207.2, 1265387.4, 1340666.6, 1412167.7,]
  var option4 = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value'
      }
    ],
    dataZoom: [//滑动条
      {
        yAxisIndex: 0,
        show: false,
        type: 'slider',
        startValue: 0,
        endValue: 6,
      }
    ],
    yAxis: [
      {
        type: 'category',
        inverse:true, //是否是反向坐标轴
        data: xdata4,
      }
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: KSMC4
      }
    ]
  };
  box2_3.setOption(option4);
  //通过定时器的方式刷新，改变statrValue，endValue
  setInterval(function () {
    // 每次向后滚动一个，最后一个从头开始。
    if (option4.dataZoom[0].endValue == KSMC.length ) {
      option4.dataZoom[0].endValue = 6;
      option4.dataZoom[0].startValue = 0;
    }
    else {
      option4.dataZoom[0].endValue = option4.dataZoom[0].endValue + 1;
      option4.dataZoom[0].startValue = option4.dataZoom[0].startValue + 1;
    }
    box2_3.setOption(option4);
  }, 2000);
</script>
</html>